<template>
    <document>
        <h1>MButton / 按钮</h1>

        <h2>Summary</h2>
        <h6>概述</h6>

        <p>按钮主要分为2种类型 —— 普通（默认）和主要，并且有三种颜色可以选择 —— 主色（蓝）、辅色（绿）、危险色（红）。</p>
        <hr>
        <p>The MButton have 2 types which are 'Normal'(as default) and 'Pirmary'. And have 3 colors can use, they are Maincolor(Blue), Subcolor(Green) and Dangercolor(Red).</p>

        <h2>Example</h2>
        <h6>效果演示</h6>

        <m-button>
            Normal Button <small>(Main color)</small>
        </m-button>

        <m-button type="pirmary">
            Pirmary Button <small>(Main color)</small>
        </m-button>

        <m-button type="pirmary" color="sub">
            Pirmary Button <small>(Sub color)</small>
        </m-button>

        <m-button type="pirmary" color="danger">
            Pirmary Button <small>(Danger color)</small>
        </m-button>

        <m-button disabled>
            Disable Button
        </m-button>

        <h2>Usage</h2>
        <h6>使用方法</h6>

<codeblock>
    &lt;m-button&gt;
        Normal Button (Main color)
    &lt;/m-button&gt;

    &lt;m-button type="pirmary"&gt;
        Pirmary Button (Main color)
    &lt;/m-button&gt;

    &lt;m-button type="pirmary" color="sub"&gt;
        Pirmary Button (Sub color)
    &lt;/m-button&gt;

    &lt;m-button type="pirmary" color="danger"&gt;
        Pirmary Button (Danger color)
    &lt;/m-button&gt;

    &lt;m-button disabled&gt;
        Disable Button
    &lt;/m-button&gt;
</codeblock>

        <h2>Props</h2>
        <h6>组件属性</h6>

        <table>
            <tr>
                <th>Names</th>
                <th>Meaning</th>
                <th>Value</th>
                <th>Note</th>
            </tr>
            <tr>
                <td>type</td>
                <td>
                    按钮类型<br>
                    The type of the MButton
                </td>
                <td>
                    normal | pirmary
                </td>
                <td>Default - normal</td>
            </tr>
            <tr>
                <td>color</td>
                <td>
                    按钮颜色<br>
                    The color of the MButton
                </td>
                <td>
                    main | sub | danger
                </td>
                <td>
                    Default - main
                </td>
            </tr>
            <tr>
                <td>disabled</td>
                <td>
                    是否禁用按钮<br>
                    disable button
                </td>
                <td>
                    disabled
                </td>
                <td>
                    Default - null
                </td>
            </tr>
        </table>

        <h2>Notice</h2>
        <h6>注意</h6>

        必须添加 .native 事件修饰符才可以触发事件。
        <hr>
        Must use the Event Modifiers '.native' so that it can trigger the event.

<codeblock>
    &lt;m-button v-on:click.native="funcname()"&gt;CLICK&lt;/m-button&gt;

    {
        methods:{
            funcname:function(){
                // TODO...
            }
        }
    }
</codeblock>

    </document>
</template>